<!-- 数据建模详情 -->
<template>
  <div
    class="category-structure-detail-container"
    id="category-structure-detail"
  >
    <div class="model-detail-header">
      <div class="model-info">
        <div class="left-info loc-start">
          <el-form ref="form" :inline="true" :model="form" label-width="80px">
            <el-form-item label="" class="model-name-form-item">
              <el-input class="model-name" v-model="form.modelName"> </el-input>
              <div class="model-name-text">
                <span
                  style="font-size: 23px; font-weight: 600; color: #344054"
                  >{{ form.modelName }}</span
                >
                <span
                  v-if="!form.alias == false"
                  style="font-size: 23px; color: #667085"
                  >{{ "(" + form.alias + ")" }}</span
                >
              </div>
            </el-form-item>
            <el-form-item label="类别代号">
              <el-input v-model="form.categoryId"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="right-btns loc-end">
          <el-button class="submit-btn" @click="handleSaveSchema"
            >保 存</el-button
          >
          <el-button class="cancel-btn">删 除</el-button>
        </div>
      </div>
      <div class="model-btn">
        <div class="left-btns loc-start">
          <el-popover
            placement="bottom-end"
            title="添加别名"
            width="246"
            v-model="aliasVisible"
          >
            <div
              style="
                width: 100%;
                padding: 12px;
                font-size: 13px;
                border: 1px solid var(--ui-border-color-base);
                border-radius: 12px;
                margin-bottom: 12px;
              "
            >
              为模型起一个易于称呼的名称。
            </div>
            <el-input
              v-model="alias"
              placeholder="别名用于方便记忆（可选）"
            ></el-input>
            <div style="text-align: right; margin: 0; margin-top: 12px">
              <el-button
                size="mini"
                class="cancel-btn"
                @click="handleAlias(false)"
                >取消</el-button
              >
              <el-button
                class="submit-btn"
                size="mini"
                @click="handleAlias(true)"
                >确定</el-button
              >
            </div>
            <el-button
              slot="reference"
              class="cancel-btn"
              size="mini"
              style="margin-right: 10px"
              >别 名</el-button
            >
          </el-popover>
          <el-button class="cancel-btn" size="mini">描 述</el-button>
          <el-button class="cancel-btn" size="mini">分辨率</el-button>
        </div>
      </div>
    </div>
    <div class="model-detail-content">
      <div class="content-header"></div>
      <div class="content-tree">
        <Wrapper :id="jsonFile.schema.id" ref="wrapperRef"></Wrapper>
      </div>
    </div>
  </div>
</template>

<script>
import Wrapper from "./wrapper.vue";
import DataTypeForm from "./data-type-form.vue";
export default {
  data() {
    return {
      version: null,
      alias: null, // 别名
      currentSchema: null, // 当前的模型信息
      currentNodeId: null, // 当前鼠标划过的节点
      isUploadModelLibrary: false,
      aliasVisible: false, // 别名小弹窗是否可见
      showInput: false, // 是否展示输入框
      isInputFocused: false, // 判断输入框是否获得焦点
      treeData: [],
      defaultProps: {
        children: "properties",
        label: "title",
      },
      form: {
        alias: null, // 别名
        modelName: null,
        categoryId: null,
      },
      data_type_text_color: {
        object: "#2e90fa",
        integer: "#ee46bc",
        string: "#139659",
        boolean: "#f37acf",
        array: "#17b26a",
        number: "#ee46bc",
        null: "#ef6820",
        dictionary: "#ef6820",
        any: "#69affb",
        quote: "#409EFF", // 引用数据的颜色
      },
      menuOptions: {
        dataTypeOptions: [
          {
            id: 1,
            name: "引用模型",
          },
          {
            id: 2,
            name: "string",
          },
          {
            id: 3,
            name: "integer",
          },
          {
            id: 4,
            name: "boolean",
          },
          {
            id: 5,
            name: "array",
          },
          {
            id: 6,
            name: "object",
          },
          {
            id: 7,
            name: "number",
          },
          {
            id: 8,
            name: "null",
          },
          {
            id: 9,
            name: "any",
          },
          {
            id: 10,
            name: "组合模式",
          },
          {
            id: 11,
            name: "自定义",
          },
        ],
        nodeCreateMenu: [
          {
            id: 1,
            name: "添加相邻节点",
            func: "handleNodeAddAdjacent",
          },
          {
            id: 2,
            name: "添加子节点",
            func: "handleNodeAddChild",
          },
        ],
      }, // 右键菜单项
      data: [
        {
          id: 1,
          parentId: -1,
          label: "一级 1",
          nameChn: "",
          description: "",
          data_type: "object",
          allow_null: false,
          isNecessary: true,
          children: [
            {
              id: 11,
              parentId: 1,
              label: "二级 1-1",
              nameChn: "",
              description: "",
              data_type: "object",
              allow_null: false,
              isNecessary: true,
              children: [
                {
                  id: 111,
                  parentId: 11,
                  label: "三级 1-1-1",
                  nameChn: "",
                  description: "",
                  data_type: "boolean",
                  allow_null: true,
                  isNecessary: false,
                },
                {
                  id: 112,
                  parentId: 11,
                  label: "三级 1-1-2",
                  nameChn: "",
                  description: "",
                  data_type: "integer",
                  allow_null: true,
                  isNecessary: false,
                },
              ],
            },
          ],
        },
        {
          id: 2,
          parentId: -1,
          label: "一级 2",
          nameChn: "",
          description: "",
          data_type: "object",
          allow_null: false,
          isNecessary: true,
          children: [
            {
              id: 21,
              parentId: 2,
              label: "二级 2-1",
              nameChn: "",
              description: "",
              data_type: "string",
              allow_null: true,
              isNecessary: false,
            },
            {
              id: 22,
              parentId: 2,
              label: "二级 2-2",
              nameChn: "",
              description: "",
              data_type: "number",
              allow_null: false,
              isNecessary: true,
            },
          ],
        },
        {
          id: 3,
          parentId: -1,
          label: "一级 3",
          nameChn: "",
          description: "",
          data_type: "object",
          allow_null: false,
          isNecessary: true,
          children: [
            {
              id: 31,
              parentId: 3,
              label: "二级 3-1",
              nameChn: "",
              description: "",
              data_type: "any",
              allow_null: true,
              isNecessary: false,
            },
            {
              id: 32,
              parentId: 3,
              label: "二级 3-2",
              nameChn: "",
              description: "",
              data_type: "null",
              allow_null: true,
              isNecessary: true,
            },
            {
              id: 33,
              parentId: 3,
              label: "二级 3-3",
              nameChn: "",
              description: "",
              data_type: "array",
              allow_null: false,
              isNecessary: true,
            },
            {
              id: 34,
              parentId: 3,
              label: "二级 3-4",
              nameChn: "",
              description: "",
              data_type: "number",
              allow_null: false,
              isNecessary: false,
            },
          ],
        },
      ],
    };
  },
  components: {
    Wrapper,
    DataTypeForm,
  },
  props: {
    treeList: {
      type: Array,
    },
    jsonFile: {
      type: Object,
    },
  },
  computed: {
    totalData() {
      return this.$store.getters.data_model_data;
    },
  },
  created() {},
  methods: {
    init() {
      this.$set(this.form, "modelName", this.jsonFile.schema.name);
      this.$set(this.form, "categoryId", this.jsonFile.schema.id);
      this.$set(this.form, "alias", this.jsonFile.schema.displayName);
      this.alias = this.jsonFile.schema.displayName;
      this.$nextTick(() => {
        this.$refs["wrapperRef"].initJSonSchema();
      });
    },
    // 点击别名触发的事件
    handleAlias(flag) {
      if (!flag) {
        this.alias = null;
        this.aliasVisible = false;
      } else {
        this.form.alias = this.alias;
        this.alias = null;
        this.aliasVisible = false;
        this.$emit("updateModelAlias", this.form);
      }
    },
    // 保存数据结构
    handleSaveSchema() {
      this.$nextTick(() => {
        this.$refs["wrapperRef"].saveJsonSchema();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.category-structure-detail-container {
  width: 100%;
  padding: 1%;
  border-radius: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  .model-detail-header {
    width: 100%;
    height: 105px;
    padding: 1%;
    box-sizing: border-box;
    .model-info {
      width: 100%;
      height: 60%;
      display: flex;
      justify-content: space-between;
      .left-info {
        width: 70%;
        height: 100%;
      }
      .right-btns {
        width: 30%;
        height: 100%;
      }
    }
    .model-btn {
      width: 100%;
      height: 40%;
      display: flex;
      justify-content: space-between;
      .left-btns {
        width: 80%;
        height: 100%;
      }
      .right-btns {
        width: 20%;
        height: 100%;
        padding-right: 0.5%;
        box-sizing: border-box;
        .icon-btn {
          width: 30px;
          height: 30px;
          cursor: pointer;
        }
        .icon-btn-first {
          background: url("/images/png/statistic.png") center no-repeat;
          background-size: 100% 100%;
        }
        .icon-btn-last {
          margin-left: 10px;
          background: url("/images/png/logs.png") center no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
  .model-detail-content {
    width: 100%;
    box-sizing: border-box;
    .content-header {
      width: 100%;
      height: 40px;
      box-sizing: border-box;
    }
    .content-tree {
      width: 100%;
      padding: 1%;
      border: 1px solid var(--ui-border-color-base);
      box-sizing: border-box;
    }
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;

  .node-text {
    display: inline-block;
    width: 50%;
    height: 32px;
    line-height: 32px;
    .node-title {
      width: 400px;
      min-width: 400px;
      height: 32px;

      padding-left: 10px;
    }
  }
  .data-type {
    position: absolute;
    left: 35vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 10px;
    .data-type-text {
      height: 100%;
      display: flex;
      span {
        pointer-events: auto;
        white-space: nowrap;
        /* 设置文字在一行显示，不能换行 */
        overflow: hidden;
        /* 文字长度超出限定宽度，则隐藏超出的内容 */
        text-overflow: ellipsis;
        /* 规定当文本溢出时，显示省略符号来代表被修剪的文本 */
      }
      span:nth-of-type(2) {
        display: block;
        width: 50px;
        height: 100%;
      }
    }
    .data-type-btn-null {
      display: none;
    }
    .btn-icon-center {
      display: block;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .end-btns {
    display: block;
    width: 60px;
    .menu-item {
      position: relative;
      height: 30px;
      .menu-item-text {
        height: 30px;
        line-height: 30px;
        color: #344054;
        font-size: 14px;
        box-sizing: border-box;
      }
    }
    .menu-item:hover {
      cursor: pointer;
      background-color: #f3f3f4;
      border-radius: 6px;
    }
  }
  .node-description {
    position: absolute;
    right: 70px;
    width: 25vw;
    height: 100%;
    display: flex;
    .description-name {
      width: 25%;
      height: 100%;
      .el-input {
        display: none;
      }
      span {
        display: block;
        width: 100%;
        height: 100%;
        line-height: 32px;
        padding: 0 15px;
      }
      &:hover {
        .el-input {
          display: block;
          height: 100%;
        }
        span {
          display: none;
        }
      }
    }
    .description-value {
      width: 70%;
      height: 100%;
      line-height: 32px;
      .el-input {
        display: none;
      }
      span {
        display: block;
        width: 100%;
        height: 100%;
        padding: 0 15px;
      }
      &:hover {
        .el-input {
          display: block;
          height: 100%;
        }
        span {
          display: none;
        }
      }
    }
  }
}
.custom-tree-node:hover {
  .data-type-btn-null {
    display: block;
  }
}
.model-name-form-item {
  .model-name {
    display: none;
  }
  .model-name-text {
    display: block;
    width: 100%;
  }
}
.model-name-form-item:focus {
  .model-name {
    display: block;
  }
  .model-name-text {
    display: none;
    width: 100%;
  }
}
.string-text {
  color: #139659;
  &:hover {
    border-bottom: 1px solid #139659;
  }
}
.integer-text,
.number-text {
  color: #ee46bc;
  &:hover {
    border-bottom: 1px solid #ee46bc;
  }
}
.boolean-text {
  color: #f37acf;
  &:hover {
    border-bottom: 1px solid #f37acf;
  }
}
.array-text {
  color: #17b26a;
  &:hover {
    border-bottom: 1px solid #17b26a;
  }
}
.object-text {
  color: #2e90fa;
  &:hover {
    border-bottom: 1px solid #2e90fa;
  }
}
.null-text,
.dictionary-text {
  color: #ef6820;
  &:hover {
    border-bottom: 1px solid #ef6820;
  }
}
.any-text {
  color: #69affb;
  &:hover {
    border-bottom: 1px solid #69affb;
  }
}
</style>
<style scoped>
.content-tree >>> .el-tree {
  height: 100%;
  overflow-y: auto;
}
.content-tree >>> .el-tree-node__content {
  height: 32px;
  position: relative;
}
.content-tree >>> .el-tree-node__content:hover .drag-icon {
  display: block !important;
}
.content-tree >>> .el-tree-node__content:hover .drag-icon:hover {
  background-image: url("/images/drag-hover.svg") !important;
}
.node-text >>> .el-input__inner {
  width: 400px;
  height: 30px;
  border-radius: 8px;
  padding-left: 10px;
}
.node-description >>> .el-input__inner {
  height: 30px;
  border-radius: 8px;
  line-height: 30px;
  padding-left: 10px;
}
.node-text >>> .el-tag {
  border-color: transparent;
}
</style>
<style>
.model-name .el-input__inner {
  font-size: 23px;
  font-weight: 600;
  color: #344054;
  border: none;
}
</style>